<script setup>
import { MessagePlugin } from 'tdesign-vue-next'
const data = [
  {
    createTime: '2022年9月22日 02:54:06',
    subscription: '作业1',
    send: '吴越1',
    content: '吴越留言每天把学习的内容写到博客上面。（2022年09月22日）留言：你的每日笔记（2022年09月22日）已经被记录，继续加油哟！'
  },
  {
    createTime: '2022年9月22日 02:54:06',
    subscription: '作业2',
    send: '吴越2',
    content: '吴越留言每天把学习的内容写到博客上面。（2022年09月22日）留言：你的每日笔记（2022年09月22日）已经被记录，继续加油哟！'
  },
  {
    createTime: '2022年9月22日 02:54:06',
    subscription: '作业3',
    send: '吴越3',
    content: '吴越留言每天把学习的内容写到博客上面。（2022年09月22日）留言：你的每日笔记（2022年09月22日）已经被记录，继续加油哟！'
  },
  {
    createTime: '2022年9月22日 02:54:06',
    subscription: '作业',
    send: '吴越',
    content: '吴越留言每天把学习的内容写到博客上面。（2022年09月22日）留言：你的每日笔记（2022年09月22日）已经被记录，继续加油哟！'
  }
]

const columns = [
  {
    colKey: 'createTime',
    title: '时间',
    // 对齐方式
    align: 'left',
    width: 100
  },
  {
    colKey: 'subscription',// 消息订阅种类
    title: 'sub',
    align: 'left',
    width: 150
  },
  {
    colKey: 'send',
    title: '发送给',
    align: 'left',
    width: 100
  },
  {
    colKey: 'content',
    title: '内容',
    ellipsis: { placement: 'top', destroyOnClose: false, theme: 'light' },
    align: 'left',
  },
]
// 消息类型数据，todo:修改为后端获取
const typeData = [
  {
    key: 'account',
    label: '账户',
    children: [
      { key: 'message', label: '留言' },
      { key: 'invitation', label: '邀请' },
      { key: 'focusOn', label: '自动关注' }
    ]
  },
  {
    key: 'forHelp',
    label: '求助',
    children: [
      { key: 'answer', label: '有新应答' },
      { key: 'inviteToHelp', label: '邀请帮忙' },
      { key: 'assist', label: '协助开始' },
      { key: 'revoke', label: '自动撤销' },
      { key: 'rewardAndAppraisal', label: '酬谢/评价' },
    ]
  },
]
// 弹窗状态
const visible = ref(false)

// 选择的消息类型
const chooesValue = ref([])
typeData.forEach(() => {
  chooesValue.value.push([])
})
// 选择一组消息类型时触发
const changeTypeGroup = (val) => {
  console.log(val, chooesValue.value)
}

// 提交选择的消息类型
const changeTypes = () => {
  // 清空当前所有提醒
  MessagePlugin.closeAll()
  // 当前是否选择消息类型
  let hasChosen = false
  chooesValue.value.forEach(choose => {
    if (choose?.length > 0) {
      hasChosen = true
      return
    }
  })
  if (!hasChosen) {// 未选择消息类型
    MessagePlugin.error('未选择消息类型！请选择后重试')
    return
  } else {
    loading.value = true
    // 模拟异步请求 todo:变更消息订阅
    setTimeout(() => {
      visible.value = false
      MessagePlugin.success('订阅成功！')
      setTimeout(() => {
        loading.value = false
      }, 300)
    }, 1500)
  }
}

// 筛选按钮加载状态
const loading = ref(false)
// 全选/取消全选
const selectAll = (checked) => {
  if (checked) {
    for (const [index, type] of typeData.entries()) {
      chooesValue.value[index] = []
      for (const child of type.children) {
        chooesValue.value[index].push(child.key)
      }
    }
  } else {
    chooesValue.value = []
  }
}
</script>

<template>
  <div style="width: 75%">
    <div class="title">
      <h2>
        <i-bxs:bell />全部消息
      </h2>
    </div>
    <div>
      <t-table maxHeight="150%" row-key="index" :data="data" :columns="columns" :pagination="{ total: 30 }">
        <!-- 表头插槽 -->
        <template #sub>
          <a class="point-color" @click="visible = !visible">
            <t-tooltip content="筛选/订阅消息" theme="light">
              消息类型
              <i-bi:gear-fill style="font-size: 10px;" />
            </t-tooltip>
          </a>
        </template>
        <!-- 单元格插槽-->
        <template #createTime="{ row }">
          <div>
            <t-tooltip :content="row.createTime" theme="light">
              <i-octicon:calendar style="cursor: pointer;" />
            </t-tooltip>
          </div>
        </template>
      </t-table>
    </div>
  </div>
  <div style="width: 25%" class="title">网站排行，关键字</div>
  <t-dialog v-model:visible="visible" width="40%">
    <template #header>
      <i-bi-funnel-fill /> <a class="point-color">筛选</a>消息
    </template>
    <t-checkbox-group v-model="chooesValue[index]" @change="changeTypeGroup" v-for="(typegroup, index) in typeData"
      :key="typegroup.key">
      <t-checkbox :check-all="true" :label="typegroup.label + ':'" />
      <t-checkbox :label="childType.label" :value="childType.key" v-for="childType in typegroup.children"
        :key="childType.key" />
    </t-checkbox-group>
    <template #footer>
      <div style="width: 100%;height: 100%;border-top: 1px silver solid;padding-top: 12px;">
        <t-checkbox style="float: left;" @change="selectAll">全选</t-checkbox>
        <t-button @click.stop="changeTypes" theme="danger" :loading="loading">{{ loading ? '修改中' : '筛选' }}</t-button>
      </div>
    </template>
  </t-dialog>
</template>

<style scoped lang="less">
.title {
  margin-top: 3vh;
}

.point-color {
  color: @point-color;
  text-decoration: none;
  cursor: pointer;
}

.point-color:hover {
  text-decoration: underline;
}
</style>